~ function($) {
    $.fn.toggling = function(options) {
        var _this = this,
            default_options = {
                vertical: false,
                ring: false //是否需要拉环
            },
            ring, pos = {},
            firstPart;

        function setContainer(o) {
            var w = o.width(),
                h = o.height();
            _this.width(w).height(h);
            pos.boundary = {
                left: 0,
                right: w,
                top: 0,
                bottom: h
            };
        }

        function loaded(target, callbacks) {
            target.on('load', function() {
                callbacks($(this));
            });
            target.each(function() {
                if (this.complete && callbacks) {
                    callbacks($(this));
                }
            });
        }

        function preventDrag(o) {
            o.on('dragstart', function() {
                return false;
            });
        }

        options = $.extend({}, default_options, options);
        this.children('.part').each(function(i) {
            //需要等到图片加载完毕
            var bg = $(this).find('img').eq(0).css('opacity', 0).attr('src'),
                bgstr = 'url(' + bg + ') ';
            loaded($(this).find('img'), setContainer);
            preventDrag($(this));
            if (i == 0) {
                firstPart = $(this);
                //left
                if (options.vertical) {
                    bgstr += 'top center';
                } else {
                    bgstr += 'left center';
                }
                $(this).css({
                    'background': bgstr,
                });
            } else if (i == 1) {
                //right
                $(this).css({
                    'background': 'url(' + bg + ') right center',
                });
            }
        });

        if (options.ring) {
            ring = this.find('.control-bar');
            preventDrag(ring);
            $(document).on('mousedown', function(e) {
                // console.log(e);
                if (e.target == ring.get(0)) {
                    pos.startx = e.pageX;
                    pos.starty = e.pageY;
                    pos.isMoving = true;
                }
            });
            $(document).on('mousemove', function(e) {
                if (pos.isMoving) {
                    pos.curx = e.pageX;
                    pos.cury = e.pageY;
                    if (options.vertical) {
                        pos.dis = e.pageY - pos.starty;
                        pos.top = ring.position().top;
                        pos.top += pos.dis;
                        if (pos.top < pos.boundary.top) {
                            pos.top = pos.boundary.top;
                        }
                        if (pos.top > pos.boundary.bottom) {
                            pos.top = pos.boundary.bottom;
                        }
                        ring.css('top', pos.top + 'px');
                        firstPart.height(pos.top);
                    } else {
                        pos.dis = e.pageX - pos.startx;
                        pos.left = ring.position().left;
                        pos.left += pos.dis;
                        if (pos.left < pos.boundary.left) {
                            pos.left = pos.boundary.left;
                        }
                        if (pos.left > pos.boundary.right) {
                            pos.left = pos.boundary.right;
                        }
                        ring.css('left', pos.left + 'px');
                        firstPart.width(pos.left);
                    }

                    pos.startx = e.pageX;
                    pos.starty = e.pageY;
                }
            });
            $(document).on('mouseup', function(e) {
                pos.isMoving = false;
                return false;
            });
            ring.on('blur', function() {
                pos.isMoving = false;
                return false;
            });
        }

        // window.setTimeout(function() {
        //     _this.children('.part').eq(0).animate({
        //         'width': 0
        //     }, 1000).animate({
        //         'width': 343 + 'px'
        //     });
        // }, 2000);

        return this;
    }
}(jQuery);
